<template>
  <Card :dis-hover="true" :title="$route.meta.title">
    <h3>排单</h3>
    <Table
      @on-selection-change="onTableBuySelectionChange"
      :columns="tableBuyColumns"
      :data="tableBuyPager.items"
      :loading="tableBuyLoading"
    />
    <Page :current="tableBuyPager.current" :total="tableBuyPager.total_items" :page-size="tableBuyPager.limit" show-total @on-change="onChangeBuyPage"></Page>

    <h3>提现</h3>
    <Table
      @on-selection-change="onTableSellSelectionChange"
      :columns="tableSellColumns"
      :data="tableSellPager.items"
      :loading="tableSellLoading"
    />
    <Page :current="tableSellPager.current" :total="tableSellPager.total_items" :page-size="tableSellPager.limit" show-total @on-change="onChangeSellPage"></Page>

    <br />
    <Button type="primary" :loading="onButtonLoading" @click="clickSubmit">提交匹配</Button>
  </Card>
</template>

<script>
  import { Button, Card, Message, Page, Table } from 'iview';
  import userMutuallyApi from '@/api/user/mutually/index';
  import userMutuallyBuyApi from '@/api/user/mutually/buy/index';
  import userMutuallySellApi from '@/api/user/mutually/sell/index';

  export default {
    components: {
      [Button.name]: Button,
      [Card.name]: Card,
      [Page.name]: Page,
      [Table.name]: Table
    },
    data() {
      return {
        onButtonLoading: false,
        formFields: {
          user_mutually_buy_average: [],
          user_mutually_sell: [],
        },
        tableBuyLoading: false,
        tableBuyPager: {
          current: 1,
          limit: 10
        },
        tableBuyColumns: [
          {type: 'selection', width: 60, align: 'center'},
          {title: 'ID', align: 'center', render: (h, params) => { return h('span', params.row.user_mutually_buy_average.id); }},
          {title: '账号', align: 'center', render: (h, params) => { return h('span', params.row.user.account); }},
          {title: '名称', align: 'center', render: (h, params) => { return h('span', params.row.user.name); }},
          {title: '手机', align: 'center', render: (h, params) => { return h('span', params.row.user.cellphone); }},
          {title: '云付通', align: 'center', render: (h, params) => { return h('span', params.row.user.cloud_account); }},
          {title: '下标', align: 'center', render: (h, params) => { return h('span', params.row.user_mutually_buy_average.average_index); }},
          {title: '数量', align: 'center', render: (h, params) => { return h('span', Math.round(params.row.user_mutually_buy.amount, 2)); }}
        ],
        tableSellLoading: false,
        tableSellPager: {
          current: 1,
          limit: 10
        },
        tableSellColumns: [
          {type: 'selection', width: 60, align: 'center'},
          {title: 'ID', align: 'center', render: (h, params) => { return h('span', params.row.user_mutually_sell.id); }},
          {title: '账号', align: 'center', render: (h, params) => { return h('span', params.row.user.account); }},
          {title: '名称', align: 'center', render: (h, params) => { return h('span', params.row.user.name); }},
          {title: '手机', align: 'center', render: (h, params) => { return h('span', params.row.user.cellphone); }},
          {title: '云付通', align: 'center', render: (h, params) => { return h('span', params.row.user.cloud_account); }},
          {title: '数量', align: 'center', render: (h, params) => { return h('span', Math.round(params.row.user_mutually_sell.amount, 2)); }}
        ]
      }
    },
    methods: {
      clickSubmit() {
        this.onButtonLoading = true;
        userMutuallyApi.match(this.formFields).then((res) => {
          if(parseInt(res.code) !== 0) {
            Message.error({
              content: res.msg
            });
            return false;
          }
          Message.success({
            content: res.msg,
            onClose: () => {
              window.location.reload();
            }
          });
          return true;
        }).catch(() => {
          this.onButtonLoading = false;
        });
      },
      onTableBuySelectionChange(sel) {
        this.formFields.user_mutually_buy_average = [];
        for(let i in sel) {
          this.formFields.user_mutually_buy_average.push(sel[i].user_mutually_buy_average.id);
        }
      },
      onTableSellSelectionChange(sel) {
        this.formFields.user_mutually_sell = [];
        for(let i in sel) {
          this.formFields.user_mutually_sell.push(sel[i].user_mutually_sell.id);
        }
      },
      onChangeBuyPage(current) {
        this.tableBuyPager.current = current;
        this.getBuyData();
      },
      onChangeSellPage(current) {
        this.tableSellPager.current = current;
        this.getSellData();
      },
      getBuyData() {
        this.tableBuyLoading = true;
        userMutuallyBuyApi.pager(this.tableBuyPager.limit, this.tableBuyPager.current).then((data) => {
          this.tableBuyPager = data.pager;
          this.tableBuyLoading = false;
        });
      },
      getSellData() {
        this.tableSellLoading = true;
        userMutuallySellApi.pager(this.tableSellPager.limit, this.tableSellPager.current).then((data) => {
          this.tableSellPager = data.pager;
          this.tableSellLoading = false;
        });
      }
    },
    created() {
      this.getBuyData();
      this.getSellData();
    }
  };

</script>